<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<span>本例我们使用component方法来注册自定义一个组件，并支持参数绑定<br/></span>
			<vue-item v-bind:items="items"></vue-item>
			<div id="xxoo">
				{{message}}
			</div>
		</div>
	</body>
<script type="text/javascript">
//要先注册组件再实例化
Vue.component('vue-item', {
	props: ['items'],  //props定义支持的参数绑定
	template: '<ul><li v-for="item in items">{{item.name}}</li></ul>'
});
var app = new Vue({
	el: '#app',
	data: {
		items: [
			{name: "高等数学"},
			{name: "大学英语"},
			{name: "心理教育"}
		],
		message: "这是虾米鬼"
	},
	
	//使用watch属性进行变量监听
	watch: {
		message: function(new_val, old_val){
			console.log("message改变前参数:");
			console.log(old_val);
			console.log("message改变后参数:");
			console.log(new_val);
		}
	}
});

console.log(app.$el);  //实例DOM，和el一一相对

/**
 * 也可以使用$watch来添加监听变量
 */
app.$watch('items', function(new_val, old_val){
	console.log("items改变前参数:");
	console.log(old_val);
	console.log("items改变后参数:");
	console.log(new_val);
});

//触发items的watch事件，但是注意push改变的是变量地址，所有new_val, old_val都被改变了
app.items.push({name: "附加课程"});

app.message = "这又是虾米鬼";
</script>
</html>